<template>
  <div  style="margin: 0 10px 0 20px;padding-top: 30px">

    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div>
        <el-descriptions title="用户信息">
          <el-descriptions-item label="头像"><img :src="row_avatar"  width="40px" height="40px"></el-descriptions-item>
          <el-descriptions-item label="用户名">{{row_username}}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{row_phoneNumber}}</el-descriptions-item>
          <el-descriptions-item label="身份">{{row_status}}</el-descriptions-item>
          <el-descriptions-item label="专业">{{row_professional}}</el-descriptions-item>
          <el-descriptions-item label="用户号">{{row_studentnumber}}</el-descriptions-item>
          <el-descriptions-item label="标签" :span='3' >
            <el-tag size="medium">{{labellist}}</el-tag>
<!--            <i style="cursor: pointer" class="el-icon-circle-plus-outline">增加标签</i><i class="el-icon-remove-outline" style="margin-left: 20px">删除标签</i>-->
          </el-descriptions-item>
        </el-descriptions>
        <el-select
          v-model="labelvalue"
          style="width: 20%"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="修改标签认证">
          <el-option
            v-for="item in labeloptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select><el-button  size="medium" type="primary" @click="dialogVisible = false;addlabeluser()">增加标签</el-button><el-button  size="medium" type="danger" @click="dialogVisible = false;deletelabeluser()">删除标签</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false" v-on:click="addlabeluser()">确认</el-button>-->
  </span>
    </el-dialog>

    <el-form style="float: left;margin-left: 80px" :inline="true"  class="demo-form-inline"  ref="UsersFormRef" :model="UsersForm">
      <el-form-item label="用户名" prop="username">
        <el-input style="width: 150px" v-model="UsersForm.username"  placeholder="用户名"   clearable></el-input>
      </el-form-item>


      <el-form-item label="专业" prop="professional" style="margin-left: 30px">
        <el-input style="width: 150px" v-model="UsersForm.professional" placeholder="专业名" clearable></el-input>
      </el-form-item>

      <el-form-item label="用户号" prop="studentnumber" style="margin-left: 30px">
        <el-input style="width: 150px" v-model="UsersForm.studentnumber" placeholder="用户号" clearable></el-input>
      </el-form-item>

      <el-form-item label="身份" prop="status" style="margin-left: 30px">
        <el-select  v-model="UsersForm.status" placeholder="身份" style="width: 150px;">
          <el-option label="学生" value="学生"></el-option>
          <el-option label="专家" value="专家"></el-option>
          <el-option label="老师" value="老师"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="margin-left: 120px" @click="select">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>

    </el-form>

      <el-table  :key="1"
        :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                 stripe
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          :index="Nindex"
          width="120">
        </el-table-column>
        <el-table-column
          prop="avatar"
          label="头像"
          type="index"
          index="Nindex"
          key="index"
          width="120">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" class="img1" >
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="professional"
          label="专业"
          width="120">
        </el-table-column>
        <el-table-column
          prop="studentnumber"
          label="用户号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="身份"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="dialogVisible=true;finduseravatar(scope.row.avatar,scope.row.username,scope.row.labelList,scope.row.id,scope.row.phoneNumber,scope.row.professional,scope.row.studentnumber,scope.row.status)">标签设置</el-button>
            <el-button v-if="scope.row.state===0"
                       size="mini"
                       type="warning"
                       @click="changeState(scope.row.username)">禁言</el-button>
            <el-button v-if="scope.row.state===1"
                       size="mini"
                       type="success"
                       @click="changeState2(scope.row.username)">取消禁言</el-button>

            <el-button
                       size="mini"
                       type="danger"
                       @click="deleteUser(scope.row.id)">删除</el-button>

            <el-switch
              v-model='scope.row.status'
              active-text="设为专家"
              active-color="#13ce66"
              active-value='专家'
              inactive-value='学生'
              @change="changestatus1(scope.row.status,scope.row.id)"
            >
            </el-switch>

            <el-switch
              v-model="scope.row.status"
              active-text="设为老师"
              active-color="#13ce66"
              active-value='老师'
              inactive-value='学生'
              @change="changestatus1(scope.row.status,scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>



    <el-pagination align='center'
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[1,5,10,20]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="users.length">
    </el-pagination>


  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "User",
  data(){
    return{
      status:'',
      id:'',
      userid:'',
      value:1,
      currentPage:1,
      totalCount:0,
      pageSize:10,
      UsersForm: {
        username: "",
        professional: "",
        studentnumber: "",
        status:"",
      },
      users:[],
      input: '',
      selectUser: "",
      dialogVisible:false,
      row_avatar:'',
      row_username:'',
      row_phoneNumber:'',
      row_professional:'',
      row_studentnumber:'',
      row_status:'',
      labellist:[],
      labelvalue:[],
      user_idlist:[],
      user_id:'',
      a:0,
      ifrepeat:false,
      labeloptions: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'SpringBoot',
        label: 'SpringBoot'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      },{
        value: '大数据',
        label: '大数据'
      },{
        value: 'Java',
        label: 'Java'
      },{
        value: 'C++',
        label: 'C++'
      },
        {
          value: 'C#',
          label: 'C#'
        },
        {
          value: '算法',
          label: '算法'
        },
        {
          value: 'Vue',
          label: 'Vue'
        },
        {
          value: 'Python',
          label: 'Python'
        },
        {
          value: 'C',
          label: 'C'
        },
        {
          value: '数据库',
          label: '数据库'
        },
        {
          value: '人工智能',
          label: '人工智能'
        }],
    }
  },
  methods: {
    deletelabeluser(){
      var x=this.labelvalue.length;
      for(var i=0;i<x;i++){this.user_idlist[i]=this.user_id}
      for(var y=0;y<x;y++) {
        // if (!this.labellist.includes(this.labelvalue[y])) {
        axios.post('http://localhost:8888/LabelUsers/deletelabel',
          {"user_id": this.user_idlist[y], "label_name": this.labelvalue[y]},
          // {emulateJSON: true},
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg)
          } else {
          }
        })
      }
      this.$router.go(0);
      this.$router.go(0);
    },
    addlabeluser(){
      var x=this.labelvalue.length;
      for(var i=0;i<x;i++){this.user_idlist[i]=this.user_id}
      for(var y=0;y<x;y++) {
        // if (!this.labellist.includes(this.labelvalue[y])) {
          axios.post('http://localhost:8888/LabelUsers/addlabeluser',
            {"user_id": this.user_idlist[y], "label_name": this.labelvalue[y]},
            // {emulateJSON: true},
          ).then(function (res) {
            if (res.data.code == 200) {
              alert(res.data.msg)
            } else {
            }
          })
        }
      // }
      this.$router.go(0);
      this.$router.go(0);
    },
    finduseravatar(a,b,c,d,e,f,g,h){
      this.row_avatar=a;
      this.row_username=b;
      this.labellist=c;
      this.user_id=d;
      this.row_phoneNumber=e;
      this.row_professional=f;
      this.row_studentnumber=g;
      this.row_status=h;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    Nindex(index) {
      const page = this.currentPage // 当前页码
      const pagesize = this.pageSize // 每页条数
      return index  +1+ (page - 1) * pagesize
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    resetForm() {
      this.$refs.UsersFormRef.resetFields()
      this.findAllUser()
      this.findAllUser()
    },
    changestatus1(st,st2){
      this.status=st;
      this.id=st2;
      this.$http.post('http://localhost:8888/User/changestatus1',
        {"id":this.id,"status":this.status},
        {emulateJSON: true}
      ).then(function (res) {
        if (res.data.code == 200) {
          alert(res.data.msg);
        }
      })

    },
    selectUsersbySchool() {
      this.$http.post('http://localhost:8888/User/findUserBySchool',
        {"professional": this.UsersForm.professional},
        {emulateJSON: true}
      ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.users = res.data.data;
          } else {
            alert(res.data.msg);
          }
        }
      )
    },

    findAllUser() {
      this.$http.post('http://localhost:8888/User/findAllUser',
      ).then(function (res) {
        this.users = res.data.data;
      })
    },
    deleteUser(iid){
      this.userid=iid;
      this.$confirm('是否确认删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('http://localhost:8888/User/deleteUserByID',
          {"id": this.userid},
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
          }
        })
        this.$router.go(0);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    changeState(username){
      this.$confirm('是否禁言该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.UsersForm.username = username;
        this.$http.post('http://localhost:8888/User/changestate',
          {"username": this.UsersForm.username},
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
          }
        })
        this.$router.go(0);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁言'
        });
      });
    },
    changeState2(username){
      this.$confirm('是否取消禁言该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.UsersForm.username = username;
        this.$http.post('http://localhost:8888/User/changestate2',
          {"username": this.UsersForm.username},
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
          }
        })
        this.$router.go(0);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消取消禁言'
        });
      });
    },
    select() {
      if(this.UsersForm.username.length===0&&this.UsersForm.professional.length===0&&this.UsersForm.studentnumber.length===0&&this.UsersForm.status.length===0){
        this.$message("请输入");
      }else {
        this.$http.post('http://localhost:8888/User/select1',
          {
            "username": this.UsersForm.username,
            "professional": this.UsersForm.professional,
            "studentnumber": this.UsersForm.studentnumber,
            "status": this.UsersForm.status,
          },
          {emulateJSON: true}
        ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.users = res.data.data;
          } else {
            alert(res.data.msg);
          }
        })
      }
    }
  },
  created(){
    this.findAllUser();
    this.findAllUser(); //两次加载
  }
}
</script>

<style scoped>

.img1{
  width:50px;
  height:80%;
  border-radius: 50%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}


</style>
